<template>
	
	<view>
		<view class="analysis">
				<!-- 时间选择 -->
				<view class="time">
					<view class="time_fl">
						<text>开始</text>
						<text @click="pickerPlus('1')">{{startTime}}</text>
					</view>
					<view class="time_con" @click="changeTime">
						<image src="../../static/image/time_zhi@2x.png" mode=""></image>
					</view>
					<view class="time_fr">
						<text>结束</text>
						<text @click="pickerPlus('2')">{{endTime}}</text>
					</view>
				</view>
			<!-- 下拉选择 -->
			<view class="selection" @click="showDown">
				{{objectDesc}}
				<image class="selection_img" v-show="!isShowDown" src="../../static/image/down@2x.png"></image>
				<image class="selection_img" v-show="isShowDown" src="../../static/image/up@2x.png"></image>
			</view>
			<!-- 下拉列表 -->
			<view class="drop_down" v-show="isShowDown">
				<view class="down_item" @click="shutDown(item)" v-for="(item,index) in trendList" :key="index">{{item.object_desc}}</view>
			</view>
		</view>
		<!-- 时间阶段选择 -->
		<view class="time_sele">
			<text @click="btnTime(1)" :class="showTimeSele == 1? 'time_seles':''">近一月</text>
			<text @click="btnTime(2)" :class="showTimeSele == 2? 'time_seles':''">近一季度</text>
			<text @click="btnTime(3)" :class="showTimeSele == 3? 'time_seles':''">近半年</text>
			<text @click="btnTime(4)" :class="showTimeSele == 4? 'time_seles':''">近一年</text>
		</view>
		<!-- 图表区域 -->
		<view class="anal_chart">
			<!-- <web-view class="webviewStyles" :src="webUrl"></web-view> -->
			<iframe :src="webUrl" frameborder="0" class='webviewStyles'></iframe>
		</view>
		<!-- 时间选择 -->
		<picker-plus ref="picker" @confirm="confirm" />
	</view>
</template>

<script>
	import PickerPlus from '../../components/e-picker-plus/e-picker-plus.vue'
	export default {
		components: {
			PickerPlus,
		},
		data() {
			return {
				objectDesc: '',
				isShowDown: false,
				webUrl: '',
				// 开始时间
				startTime: '选择开始时间',
				// 结束时间
				endTime: '选择结束时间',
				// 开始/结束时间
				currentIndex: '1',
				// 事件区间选择高亮
				showTimeSele: 1,
				// 参数名称
				objectName: '',
				// 下拉数据
				trendList: [],
				// 表单数据
				chartData: {}
			};
		},
		onLoad(option) {
			this.currentId = option.id  
		},
		mounted() { 
			// 获取下拉列表的数据
			this.getTrendObject(this.currentId)
			// 获取图表数据 
			// 	this.compoundTrend() 
		}, 
		methods: {
			showDown() { 
				this.isShowDown = !this.isShowDown
			},
			shutDown(data) {
				this.objectDesc = data.object_desc
				this.objectName = data.object_name
				this.isShowDown = false
			},
			// 显示隐藏时间选择
			pickerPlus(index) {
				this.currentIndex = index
				this.$refs.picker.show()
			},
			// 确认选择
			confirm(data) {
				// 开始时间
				if (this.currentIndex == '1') {
					this.startTime = data.result
				} else {
					this.endTime = data.result
				}
			},
			// 改变时间先后顺序
			changeTime() {},
			// 时间高亮
			btnTime(index) {
				this.showTimeSele = index
				this.compoundTrend()
			},
			// 获取选择参数对象列表
			getTrendObject(id) {
				let that = this
				that.$http({
					url: '/wxapi/ChartAnalysisApi/getTrendObject',
					data: {
						station_id: id
					},
					method: 'POST'
				}).then(res => {
					if (res.code == 200) {
						that.trendList = res.data
						that.objectDesc = that.trendList[0].object_desc
						that.objectName = res.data[0].object_name
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 获取能耗分析图表数据
			compoundTrend() {
				let that = this
				let data = {
					station_id: that.currentId,
					object_name: that.objectName,
					show_type: that.showTimeSele,
					start: that.startTime == '选择开始时间' ? 0 : that.startTime,
					end: that.endTime == '选择结束时间' ? 0 : that.endTime
				}
				that.$http({
					url: '/wxapi/ChartAnalysisApi/compoundTrend',
					method: 'POST',
					data: { ...data
					}
				}).then(res => {
					if (res.code == 200) {
						that.chartData = res.data
						console.log(res.data.url)
						this.webUrl = res.data.url
					}
				})
			}
		},
		watch: {
			// 选择数据后重新请求
			objectName(value) {
				this.compoundTrend()
			},
			endTime(value) {
				this.compoundTrend()
			}
		}
	}
</script>

<style lang="less" scoped>
	.analysis {
		padding: 26rpx;
		background-color: #2595FF;
		.time {
			display: flex;
			height: 50rpx;
			.time_con {
				text-align: center;
				flex: 1;

				image {
					width: 47rpx;
					height: 47rpx;
				}
			}
			.time_fl,
			.time_fr {
				width: 300rpx;
				height: 100%;
				line-height: 48rpx;
				border-radius: 23rpx;
				background-color: #fff;

				& text:nth-child(1) {
					margin-right: 10rpx;
					display: inline-block;
					width: 90rpx;
					text-align: center;
					color: #2595FF;
					border-right: 1rpx solid #2595FF;
				}
			}
		}
		.selection {
			position: relative;
			margin-top: 30rpx;
			padding-left: 30rpx;
			height: 50rpx;
			line-height: 50rpx;
			background-color: #fff;
			border-radius: 25rpx;

			.selection_img {
				position: absolute;
				right: 20rpx;
				top: 10rpx;
				width: 30rpx;
				height: 30rpx;
			}
		}
		.drop_down {
			padding: 8rpx 0;
			position: absolute;
			left: 24rpx;
			width: 93%;
			margin-top: 6rpx;
			border-radius: 25rpx;
			background-color: #fff;
			z-index: 100;
			box-shadow: 0px 8rpx 16rpx #959595;
			.down_item {
				// padding-left: 20rpx;
				margin: 0 28rpx;
				height: 66rpx;
				line-height: 66rpx;
				border-bottom: 2rpx solid #f6f8fc;
			}
		}
	}
	.time_sele {
		display: flex;
		justify-content: space-around;
		height: 100rpx;
		background-color: #f3f5f8;

		text {
			flex: 1;
			margin: 30rpx 20rpx;
			height: 50rpx;
			text-align: center;
			border-radius: 25rpx;
			background-color: #fff;
		}
	}

	.anal_chart {
		padding-top: 108rpx;
		height: 600rpx;
	}

	.time_seles {
		background-color: #2596FF !important;
		color: #fff;
	}
</style>
